<template>

    <div id="app">
        <t-form ref="formValidatorStatus" :data="shop" :rules="rules" @reset="onReset" @submit="onSubmit"
            @validate="onValidate">

            <t-form-item label="" name="imgUrl">
                <t-input v-model="shop.imgUrl" placeholder="请输入商品分类" hidden></t-input>
                <t-upload name="file" v-model="shop.imgUrl" method="post" action="/api/img/upload2" theme="image"
                    tips="请选择单张图片文件上传" draggable=true @fail="formatResponse" @success="imgSUC" :data="{ id:1 }"
                    @format-response="formatResponse"></t-upload>
            </t-form-item>

            <t-form-item :status-icon="false">
                <t-space size="small">
                    <t-button theme="primary" type="submit">提交</t-button>
                    <t-button theme="default" variant="base" type="reset">重置</t-button>
                </t-space>
            </t-form-item>
        </t-form>
    </div>
</template>
<script lang="jsx" setup>
import { ref, onMounted } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { addBanner } from '@/http/modules/indexres';
import mitt from '@/utils/mitt/index'
import { useRouter } from 'vue-router'

const shop = ref({
    imgUrl: ""
})
const router = useRouter()

const rules = {
    imgUrl: [
        { required: true, message: '必须上传图片', type: 'error' },
    ]
};

const onSubmit = ({ validateResult, firstError, e }) => {
    e.preventDefault();
    if (validateResult === true) {
        addBanner(shop.value.imgUrl).then(res => {
            console.log('上传轮播图成功！', res);
        })
        router.push("/index-resources/banerlist")
        MessagePlugin.success(`提交轮播图成功`);
        shop.value = {
            imgUrl: ""
        }
    } else {
        console.log('Validate Errors: ', firstError, validateResult);
        MessagePlugin.warning(firstError);
    }
};

const imgSUC = (c) => {
    shop.value.imgUrl = c.response.imageUrl
    console.log(shop.value);
}
const onReset = () => {
    shop.value = {
        imgUrl: ""
    }
    MessagePlugin.success('重置成功');
};


</script>
<style scoped>
.tdesign-demo-form-status .t-input {
    width: 520px;
}

#app {
    border-radius: 10px;
    padding: 40px 0;
    background-color: white;
}
</style>
  